<template>
  <div class='home-container flex'>
    <div class='home-container-main'>
      <div class='fullscreen' @click='handleFullScreen' :style='fullscreenFlag ? "" : "top: 20px;right: 20px"'>
        <a-icon type='fullscreen' v-if='fullscreenFlag' />
        <a-icon type="fullscreen-exit" v-if='!fullscreenFlag' />
        {{fullscreenFlag ? '全屏' : '退出全屏'}}
      </div>
      <!--顶部数字集合-->
      <div class='top-nums'>
        <div class='num1'>
          <div class='main'>
            <a-skeleton active v-if='pageLoading' />
            <top-num v-else
                     title='本月发电量'
                     unit='kWh'
                     img='line1'
                     value-color='#4470D8'
                     :new-value='headRes ? headRes.curMonthELectricityGen.toString() : "0"'
                     :old-value='headRes ? headRes.lastMonthELectricityGen.toString() : "0"'
                     :up-or-down='headRes && headRes.curMonthELectricityGen >  headRes.lastMonthELectricityGen'
                     :percentage='headRes && headRes.electricCompare.toString()' />
          </div>
        </div>
        <div class='num2'>
          <div class='main'>
            <a-skeleton active v-if='pageLoading' />
            <top-num v-else
                     title='本月制氢量'
                     unit='m³'
                     img='line1'
                     value-color='#4470D8'
                     :new-value='headRes ? headRes.curMonthhHydrogenGen.toString() : "0"'
                     :old-value='headRes ? headRes.curMonthhHydrogenGen.toString() : "0"'
                     :up-or-down='headRes && headRes.curMonthhHydrogenGen >  headRes.lastMonthHydrogenGen'
                     :percentage='headRes && headRes.hydrogenCompare.toString()' />
          </div>
        </div>
        <div class='num3'>
          <div class='main'>
            <a-skeleton active v-if='pageLoading' />
            <top-num v-else
                     title='本月供热量'
                     unit='kWh'
                     img='line1'
                     value-color='#4470D8'
                     :new-value='headRes ? headRes.curMonthHeatGen.toString() : "0"'
                     :old-value='headRes ? headRes.lastMonthHeatGen.toString() : "0"'
                     :up-or-down='headRes && headRes.curMonthHeatGen >  headRes.lastMonthHeatGen'
                     :percentage='headRes && headRes.heatCompare.toString()' />
          </div>
        </div>
        <div class='num4'>
          <div class='main'>
            <a-skeleton active v-if='pageLoading' />
            <top-num v-else
                     title='本月制冷量'
                     unit='kWh'
                     img='line1'
                     value-color='#4470D8'
                     :new-value='headRes ? headRes.curMonthColdGen.toString() : "0"'
                     :old-value='headRes ? headRes.lastMonthColdGen.toString() : "0"'
                     :up-or-down='headRes && headRes.curMonthColdGen >  headRes.lastMonthColdGen'
                     :percentage='headRes && headRes.coldCompare.toString()' />
          </div>
        </div>
      </div>

      <div class='flex mt20'
           style='display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(3, 1fr);grid-column-gap: 24px;grid-row-gap: 24px;height: calc(100% - 160px);'>
        <!-- 电气系统累计发电量-->
        <div class='small-card card'>
          <a-skeleton active v-if='pageLoading' />
          <power v-else height='100%' width='100%' :data='electicReportData' @getData='electicReport' />
        </div>
        <!-- 暖通系统累供热量-->
        <div class='small-card card ml24'>
          <a-skeleton active v-if='pageLoading' />
          <HVAC v-else height='100%' width='100%' :data='heatReportData' @getData='heatReport' />
        </div>

        <div class='small-card card ml24'>
          <a-skeleton active v-if='pageLoading' />
          <HVAC1 v-else height='100%' width='100%' :data='heatReportData2' @getData='heatReport2' />
        </div>

        <!-- 氢能系统电解槽累计制氢量-->
        <div class='small-card card'>
          <a-skeleton active v-if='pageLoading' />
          <hydrogen v-else height='100%' width='100%' :data='hydrogenReportData' @getData='hydrogenReport' />
        </div>
        <!-- 氢能系统燃料电池组累计供电量-->
        <div class='small-card card ml24'>
          <a-skeleton active v-if='pageLoading' />
          <hydrogen1 v-else height='100%' width='100%' :data='hydrogenReportData2' @getData='electicReport2' />
        </div>

        <!-- 氢能系统燃料电池组累计供热量-->
        <div class='small-card card ml24'>
          <a-skeleton active v-if='pageLoading' />
          <hydrogen2 v-else height='100%' width='100%' :data='hydrogenReportData3' @getData='heatReport3' />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { headLine, electicReport, hydrogenReport, heatReport } from '@/api/homePage'
import TopNum from './components/TopNum.vue'
import TotalRevenue from './components/TotalRevenue.vue' // 总收入总成本
import MonthCarbon from './components/MonthCarbon.vue'// 月度碳排
import Power from './components/Power.vue'// 电气累计发电量
import MonthEfficiency from './components/MonthEfficiency.vue' // 月度综合能效
import HVAC from './components/HVAC.vue'// 暖通系统累供热量
import HVAC1 from './components/HVAC1.vue'// 暖通系统累供热量
import Hydrogen from './components/Hydrogen.vue'// 氢能
import Hydrogen1 from './components/Hydrogen1.vue'// 氢能1
import Hydrogen2 from './components/Hydrogen2.vue'// 氢能2

export default {
  components: {
    TotalRevenue,
    MonthCarbon,
    MonthEfficiency,
    Power,
    HVAC,
    HVAC1,
    Hydrogen,
    Hydrogen1,
    Hydrogen2,
    TopNum
  },
  data() {
    return {
      pageLoading: false,
      fullscreenFlag: true,
      headRes: null,
      electicReportData: [],
      hydrogenReportData: [],
      hydrogenReportData2: [],
      hydrogenReportData3: [],
      heatReportData: [],
      heatReportData2: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      // const { HomeContainer } = this
      document.addEventListener('fullscreenchange', (res) => {
        if (document.fullscreenElement) {
          this.fullscreenFlag = false
        } else {
          this.fullscreenFlag = true
        }
      })
    })
    this.initPage()
  },
  methods: {
    handleFullScreen() {
      const HomeContainer = document.getElementsByClassName('home-container')[0]
      if (HomeContainer) {
        if (this.fullscreenFlag) {
          HomeContainer.requestFullscreen()
        } else {
          document.exitFullscreen()
        }
      }
    },
    computedPie(cur, last) {
      if (cur === 0 && last === 0) {
        return '0'
      }
      if (last === 0) {
        return '100'
      }
      return (cur / last).toString()
    },
    initPage() {
      this.pageLoading = true
      this.headLine()
      // this.electicReport()
      // this.hydrogenReport()
      // this.electicReport2()
      // this.heatReport3()
      // this.heatReport()
      // this.heatReport2()
    },
    headLine() {
      return headLine().then(res => {
        this.headRes = res
        this.pageLoading = false
      })
    },
    electicReport(type = 'day') {
      return electicReport({
        type,
        positionNames: '光伏发电,氢燃料电池供电'
      }).then(res => {
        this.electicReportData = res
      })
    },
    hydrogenReport(type = 'day') {
      return hydrogenReport({
        type,
        positionNames: '电解槽制氢量'
      }).then(res => {
        this.hydrogenReportData = res
      })
    },
    electicReport2(type = 'day') {
      return electicReport({
        type,
        positionNames: '氢燃料电池供电'
      }).then(res => {
        this.hydrogenReportData2 = res
      })
    },
    heatReport3(type = 'day') {
      return heatReport({
        type,
        positionNames: '氢燃料电池供热'
      }).then(res => {
        this.hydrogenReportData3 = res
      })
    },
    // 暖通1
    heatReport(type = 'day') {
      return heatReport({
        type,
        positionNames: '地源热泵组供热,电锅炉-锅炉1供热,电锅炉-锅炉2供热'
      }).then(res => {
        this.heatReportData = res
      })
    },
    // 暖通2
    heatReport2(type = 'day') {
      return heatReport({
        type,
        positionNames: '地源热泵组供冷'
      }).then(res => {
        this.heatReportData2 = res
      })
    }
  }
}
</script>

<style lang='less' scoped>
@import './Home';
</style>
